<template>
    <el-dialog :title="title"
               :visible.sync="show"
               :show-close="false"
               center
               class="response-dialog">
        <div class="title">入参</div>
        <pre v-html="params"></pre>
        <div class="title">出参</div>
        <pre v-html="response"></pre>
    </el-dialog>
</template>

<script>
export default {
    data () {
        return {
            show: false,
            title: '入/出参详情',
            params: {}, // 需要显示的信息
            response: {} // 需要显示的信息
        }
    },
    methods: {
        triggerShow (info) {
            if (!info) {
                this.showNotify({ message: '没有结果信息' })
                return
            }
            this.params = this.renderJSON(info.params)
            this.response = this.renderJSON(info.response)
            this.show = true
        },
        renderJSON (json) {
            if (typeof json !== 'string') {
                json = JSON.stringify(json, null, 6)
            }
            json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
                let cls = 'number'
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key'
                    } else {
                        cls = 'string'
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean'
                } else if (/null/.test(match)) {
                    cls = 'null'
                }
                match = match.replace(/\\n/g, '<br>')
                return `<span class="${cls}">${match}</span>`
            })
        }
    }
}
</script>

<style lang="stylus">
.response-dialog .el-dialog__body
    height 60vh
    overflow auto
    pre
        font-family Roboto
        white-space pre-wrap
        .string
            color green
        .number
            color darkorange
        .boolean
            color blue
        .null
            color magenta
        .key
            color red
.title
    margin-bottom 10px
    margin-top 10px
    padding-left 10px
    font-size 18px
    font-weight bold
    color #fff
    background-color #26a69a
</style>
